<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.list li {
				float: left;
				width: 15%;
				height: 15px;
				border: solid 1px #ddd;
				margin: 2px;
			}
		</style>
	</head>
	<body>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>颜色</h3>
					<ul class="d-list">
						<li>颜色包含：纯色、渐变、透明</li>
						<li>颜色组成：RGBA, R=红 G=绿 B=蓝 A=透明</li>
						<li>颜色应用：字体、边框、前景、背景</li>
						<li>渐变：线性渐变 linear-gradient(方向 颜色1 位置1, 颜色2 位置2, ...)，径向渐变 radial-gradient</li>
						<li>背景渐变：background-image: 渐变</li>
						<li>边框渐变: border-image: 渐变 内向偏移量</li>
						<li><a href="https://color.oulu.me/" target="_blank">渐变网站</a></li>
					</ul>
				</section>
			</div>
			<div class="col-1">
				<section class="card m-10">
					<header>纯色</header>
					<main>
						<ul id="ulc1" class="list">
						</ul>
						<div class="clear"></div>
					</main>
				</section>
			</div>
			<div class="col-1">
				<section class="card m-10">
					<header>渐变</header>
					<main>

					</main>
				</section>
				<section class="card m-10">
					<header>透明</header>
					<main>
					</main>
				</section>
			</div>
		</div>
		<script type="text/javascript">
			function initColors() {
				initColors1();
			}

			function initColors1() {
				let style = null;
				let color = null;
				let joList = $("#ulc1");
				for (let r = 0; r < 16; r += 3) {
					for (let g = 0; g < 16; g += 3) {
						for (let b = 0; b < 16; b += 3) {
							color = formatColor(r, g, b);
							style = "background-color:" + color;
							$("<li></li>").attr("style", style).attr("title", color).appendTo(joList);
						}
					}
				}
			}

			function formatColor(r, g, b) {
				return "#" + r.toString(16).toUpperCase() + g.toString(16).toUpperCase() + b.toString(16).toUpperCase();
			}

			initColors();
		</script>
	</body>
</html>
